import isPlainObject from 'lodash.isplainobject';
import React  from 'react';
import PropTypes from 'proptypes';
import classNames from 'classnames';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';

export default function PreviewModal (props) {
  // static propTypes = {
  //   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  //   onCloseClick: PropTypes.func.isRequired,
  // };

  // constructor(props, context) {
  //   super(props, context);
  //   state = {};
  // }

  // componentDidMount() {
  //   // $(refs.previewModal).modal({
  //   //   context: 'body',
  //   //   closable: false,
  //   //   detachable: false,
  //   //   onDeny: () => {
  //   //     props.onCloseClick();
  //   //     return true;
  //   //   },
  //   // }).modal('show');
  // }

  // componentWillUnmount() {
  //   // $(refs.previewModal).modal('hide');
  // }
 const [state,setState]=React.useState({});
  const onClick=(type)=> {
    setState({ selected: type });
  }


  const getPreviewValue=(type)=> {

    const { value } = props;
    try {
      switch (type) {
        case 'plain':
          return isPlainObject(value) ? JSON.stringify(value) : value;
        case 'json':
          return <pre>{JSON.stringify(value, null, 2)}</pre>;
        default:
          return value;
      }
    } catch (err) {
      return 'Not valid format';
    }
  }


  const renderMenu=() =>{

    const { selected } = state;
    const items = [
      { type: 'plain', name: 'Plain Text', default: true },
      { type: 'json', name: 'JSON' },
    ];

    return (
      <div className="ui fluid two item menu">
        {items.map(item => {
          const className = classNames({
            item: true,
            active: (!selected && item.default) || selected === item.type,
          });

          /* eslint react/jsx-no-bind:0 */
          return (
            <Button
              key={item.type}
              onClick={onClick.bind(this, item.type)}
              className={className}
            >
              {item.name}
            </Button>
          );
        })}
      </div>
    );
  }

    const selected = state.selected || 'plain';
    const previewValue = getPreviewValue(selected);
    return (
      <Dialog

        closable="false"
        detachable="false"
        open={props.modalOpen}
        dimmer={'inverted'}
      >
        <DialogTitle>Content Preview</DialogTitle>
        <DialogContent>
          {renderMenu()}
          <div className="ui segment">
            <div style={{ maxHeight: '500px', overflowY: 'scroll' }}>
              {previewValue}
            </div>
          </div>
        </DialogContent>
        <DialogActions>
          <Button
            className="small ui black deny right button"
            onClick={props.onCloseClick}
            tabIndex={0}
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    );
}
